<template>
  <div>
    <h2>ICH LIEBE DICH</h2>
    <h2>{{ name }}</h2>
    <h2>{{ address }}</h2>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: 'kiana',
      address: "jidong",
    };
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 30px;
  text-align: center;
  background-image: -webkit-linear-gradient(
    left,
    #e9a5a5,
    #b8c1c0 10%,
    #65c0e0 20%,
    #aea2db 30%,
    #81c1d9 40%,
    #e9a5a5 50%,
    #b8c1c0 60%,
    #65c0e0 70%,
    #aea2db 80%,
    #81c1d9 90%,
    #e9a5a5
  );
  color: transparent;
  -webkit-background-clip: text;
  background-size: 50% 100%;
  animation: a 5s infinite linear;
}

@keyframes a {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
</style>